<template>
  <div id="recruitlist">
    <el-breadcrumb separator=">">
      <el-breadcrumb-item :to="{ path: '/' }">系统首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/recruit/unit/projectList' }">公开招聘</el-breadcrumb-item>
      <el-breadcrumb-item>基础信息维护</el-breadcrumb-item>
    </el-breadcrumb>
    <section class="wboxd" style="margin-top:10px">
      <!--列表-->
      <div v-if="listLoading">数据加载中...</div>
      <template v-else>
        <el-form :model="editForm" label-width="200px" ref="editForm" :inline="true" style="padding:10px 0 0;clear:both" inline-message :rules="editFormRules">
          <table cellspacing="0" cellpadding="0" class="mytable">
            <tr>
              <th style="width:160px; vertical-align: middle;">单位名称</th>
              <td colspan="5" style="vertical-align: middle;">
                {{unitName}}
              </td>
            </tr>
            <tr>
              <th style="width:140px; vertical-align: middle;">编制（员工控制数）</th>
              <td style="vertical-align: middle;">
                <el-form-item prop="postNum">
                  <el-input-number v-model="editForm.postNum" />
                </el-form-item>
              </td>
              <th style="width:140px; vertical-align: middle;">其中领导班子职数</th>
              <td style="vertical-align: middle;">
                <el-form-item prop="leaderPostNum">
                  <el-input-number v-model="editForm.leaderPostNum" />
                </el-form-item>
              </td>
              <th rowspan="2" style="width:250px; vertical-align: middle;">拟离退休人数</th>
              <td rowspan="2" style="vertical-align: middle;">
                <el-form-item prop="retireeNum">
                  <el-input-number v-model="editForm.retireeNum" />
                </el-form-item>
              </td>
            </tr>
            <tr>
              <th style="width:160px; vertical-align: middle;">现有人员数</th>
              <td style="vertical-align: middle;">
                <el-form-item prop="personNum">
                  <el-input-number v-model="editForm.personNum" />
                </el-form-item>
              </td>
              <th style="width:140px; vertical-align: middle;">其中领导班子人数</th>
              <td style="vertical-align: middle;">
                <el-form-item prop="leaderPersonNum">
                  <el-input-number v-model="editForm.leaderPersonNum" />
                </el-form-item>
              </td>
            </tr>
            <tr>
              <th colspan="2" style="width:140px; vertical-align: middle;">制度建设情况（截至目前情况，请勾选）</th>
              <td colspan="4" style="vertical-align: middle;">
                <el-form-item prop="institutional">
                  <el-checkbox-group v-model="editForm.institutional">
                    <el-checkbox label="A">未制定毕业生招聘接收工作标准和规范</el-checkbox>
                    <br>
                    <el-checkbox label="B">已建立本单位毕业生招聘接收工作标准和规范</el-checkbox>
                    <br>
                    <el-checkbox label="C">执行上级主管部门统一招聘接收工作标准和规范</el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <th colspan="2" style="width:140px; vertical-align: middle;">毕业生招聘接收方式（截至目前情况，请勾选）</th>
              <td colspan="4" style="vertical-align: middle;">
                <el-form-item prop="receiveMode">
                  <el-checkbox-group v-model="editForm.receiveMode">
                    <el-checkbox label="A">面向社会公开招聘</el-checkbox>
                    <br>
                    <el-checkbox label="B">校园招聘</el-checkbox>
                    <br>
                    <el-checkbox label="C">内部推荐</el-checkbox>
                    <br>
                    <el-checkbox label="D">其他（请注明）</el-checkbox>
                    <br>
                  </el-checkbox-group>
                </el-form-item>
                <div style="width:100%" />
                <el-form-item prop="receiveModeRemark">
                  <el-input v-if="editForm.receiveMode.includes('D')" style="width:500px" v-model="editForm.receiveModeRemark"></el-input>
                </el-form-item>
              </td>
            </tr>
          </table>
        </el-form>
        <el-button style="margin:10px" type="primary" @click.native="editFormSubmit" :loading="editLoading">保存</el-button>
      </template>
      <!-- <el-button @click.native="editFormVisible = false">取消</el-button> -->
      <!-- <el-button icon="el-icon-plus" type="success" style="margin:10px" @click="handleAdd">新增</el-button>
      <el-table :data="selectionlist" highlight-current-row v-loading="listLoading" style="width: 100%;border-top:1px solid #9CA3B3" :height="tableHeight" border id="selectionindexlist" row-key="personId"
        default-expand-all
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
        <el-table-column label="年度" align="center" prop="theYear" width="60" />
        <el-table-column prop="unitName" label="单位名称" min-width="150">
          <template slot-scope="scope">
            {{unitName}}
          </template>
        </el-table-column>
        <el-table-column prop="postNum" label="编制（员工控制数）" width="180" align="center">
        </el-table-column>
        <el-table-column prop="leaderPostNum" label="其中领导班子职数" width="180" align="center">
        </el-table-column>
        <el-table-column prop="personNum" label="现有人员数" width="100" align="center">
        </el-table-column>
        <el-table-column prop="leaderPersonNum" label="其中领导班子人数" width="180" align="center">
        </el-table-column>
        <el-table-column prop="retireeNum" label="拟离退休人数（截至7月底）" width="200" align="center">
        </el-table-column>
        <el-table-column prop="institutional" label="制度建设情况" width="370">
          <template slot-scope="scope">
            <div v-if="scope.row.institutional">
              <div v-if="JSON.parse(scope.row.institutional).includes('A')">未制定毕业生招聘接收工作标准和规范</div>
              <div v-if="JSON.parse(scope.row.institutional).includes('B')">已建立本单位毕业生招聘接收工作标准和规范</div>
              <div v-if="JSON.parse(scope.row.institutional).includes('C')">执行上级主管部门统一招聘接收工作标准和规范</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="毕业生招聘接收方式" width="200">
          <template slot-scope="scope">
            <div v-if="scope.row.receiveMode">
              <div v-if="JSON.parse(scope.row.receiveMode).includes('A')">面向社会公开招聘</div>
              <div v-if="JSON.parse(scope.row.receiveMode).includes('B')">校园招聘</div>
              <div v-if="JSON.parse(scope.row.receiveMode).includes('C')">内部推荐</div>
              <div v-if="JSON.parse(scope.row.receiveMode).includes('D')">其他：{{scope.row.receiveModeRemark}}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120">
          <template slot-scope="scope">
            <template>
              <el-dropdown split-button  @click="handleDetail(scope.row)" size="small" type="primary" :loading="btnLoading">
                修改
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item @click.native="handleDel(scope.row.id)" >删除</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </template>
          </template>
        </el-table-column>
      </el-table> -->
    </section>
  </div>
</template>

<script>
export default {
  data () {
    return {
      yearList: [],
      theYear: 2023,
      btnLoading: false,
      editFormVisible: false,
      editLoading: false,
      listLoading: false,
      editForm: {
        unitName: '',
        theYear: 2023,
        postNum: 0,
        leaderPostNum: 0,
        personNum: 0,
        leaderPersonNum: 0,
        retireeNum: 0,
        institutional: [],
        receiveMode: [],
        receiveModeRemark: ''
      },
      editFormRules: {
        theYear: [
          { required: true, message: '必填', trigger: 'blur' }
        ],
        postNum: [
          { required: true, message: '必填', trigger: 'blur' }
        ],
        leaderPostNum: [
          { required: true, message: '必填', trigger: 'blur' }
        ],
        personNum: [
          { required: true, message: '必填', trigger: 'blur' }
        ],
        leaderPersonNum: [
          { required: true, message: '必填', trigger: 'blur' }
        ],
        retireeNum: [
          { required: true, message: '必填', trigger: 'blur' }
        ],
        inPostCount3: [
          { required: true, message: '必填', trigger: 'blur' }
        ],
        institutional: [
          { required: true, message: '必填', trigger: 'blur' }
        ],
        receiveMode: [
          { required: true, message: '必填', trigger: 'blur' }
        ]
      },
      dialogTitle: '新增',
      timestamp: '',
      changeType: '',
      substep: '',
      steppersonId: '',
      personId: '',
      jdcchuzhang: '',
      chuzhangs: [],
      tasknum: '',
      filters: {
        status: 1,
        personName: '',
        unitName: '',
        year: null
      },
      selectionlist: [],
      totalnum: 0,
      pageNum: 1,
      pageSize: 20,
      changeSizeFlag: false,
      unitName: '',
      necessaryItems: [],
      mangeDep: [],
      tableHeight: 100,
      userRoles: '',
      jdcuserlist: [],
      jdcsetting: [],
      jdc1: '',
      jdc2: '',
      jdc3: '',
      jdc4: '',
      isReviewUser: null
    }
  },
  methods: {
    getUnitName () {
      this.$http
        .get(this.$http.defaults.recruitAPI + `api/recruitBusUnit/getCurrentUnitName`)
        .then(response => {
          this.unitName = response.data.result
        })
        .catch(error => {
          this.$message({
            message: '获取失败:' + error,
            type: 'error'
          })
        })
    },
    ftypename (type) {
      switch (type) {
        case 1:
          return '应届毕业生招聘'
        case 2:
          return '在职人员招聘'
        case 3:
          return '其他招聘'
      }
    },
    doit (id, step) {
      this.$router.push({name: 'recruitUnitDetail', query: {step: step, unitBatchId: id}})
    },
    audit (id) {
      this.$router.push({name: 'recruitUnitAudit', query: {id: id}})
    },
    handleDetail (obj) {
      this.dialogTitle = '修改'
      this.editForm.id = obj.id
      this.editForm.unitName = obj.unitName
      this.editForm.theYear = obj.theYear
      this.editForm.postNum = obj.postNum
      this.editForm.leaderPostNum = obj.leaderPostNum
      this.editForm.personNum = obj.personNum
      this.editForm.leaderPersonNum = obj.leaderPersonNum
      this.editForm.retireeNum = obj.retireeNum
      this.editForm.institutional = obj.institutional ? JSON.parse(obj.institutional) : []
      this.editForm.receiveMode = obj.receiveMode ? JSON.parse(obj.receiveMode) : []
      this.editForm.receiveModeRemark = obj.receiveModeRemark
      this.editFormVisible = true
    },
    handleAdd () {
      this.dialogTitle = '新增'
      this.editForm.id = null
      this.editForm.unitName = ''
      this.editForm.postNum = 0
      this.editForm.theYear = this.theYear
      this.editForm.leaderPostNum = 0
      this.editForm.personNum = 0
      this.editForm.leaderPersonNum = 0
      this.editForm.retireeNum = 0
      this.editForm.institutional = []
      this.editForm.receiveMode = []
      this.editForm.receiveModeRemark = ''
      this.editFormVisible = true
    },
    handleDel (id) {
      this.$confirm('确认删除该记录吗?', '提示', {
        type: 'warning'
      }).then(() => {
        let para = {ids: [id]}
        this.btnLoading = true
        this.$http.post(this.$http.defaults.recruitAPI + 'api/recruitBusUnitInfo/remove', para).then(response => {
          if (response.data.success === true) {
            this.btnLoading = false
            this.$message({
              message: '删除成功',
              type: 'success'
            })
          } else {
            console.log('删除失败:' + response.data.message)
            this.$message({
              message: '删除失败:' + response.data.message,
              type: 'error'
            })
          }
          this.getList()
        })
          .catch(error => {
            console.log(error)
            this.$message({
              message: '删除失败:' + error,
              type: 'error'
            })
          })
      })
    },
    editFormSubmit () {
      this.$refs.editForm.validate((valid) => {
        if (valid) {
          this.editLoading = true
          let para = {
            id: this.editForm.id,
            postNum: this.editForm.postNum,
            leaderPostNum: this.editForm.leaderPostNum,
            personNum: this.editForm.personNum,
            leaderPersonNum: this.editForm.leaderPersonNum,
            retireeNum: this.editForm.retireeNum,
            institutional: JSON.stringify(this.editForm.institutional),
            receiveMode: JSON.stringify(this.editForm.receiveMode),
            receiveModeRemark: this.editForm.receiveModeRemark
          }
          this.$http.post(this.$http.defaults.recruitAPI + `api/recruitBusUnitInfo/save`, para).then(response => {
            console.log(response.data.success)
            if (response.data.success === true) {
              this.$message({
                message: '提交成功',
                type: 'success'
              })
              this.editFormVisible = false
              this.editLoading = false
              this.getDetail()
            } else {
              console.log('提交失败:' + response.data.message)
              this.$message({
                message: '提交失败:' + response.data.message,
                type: 'error'
              })
              this.editLoading = false
            }
          }).catch(error => {
            console.log(error)
            this.$message({
              message: '提交失败:' + error,
              type: 'error'
            })
            this.editLoading = false
          })
        }
      })
    },
    getDetail () {
      this.listLoading = true
      this.$http
        .get(this.$http.defaults.recruitAPI + `api/recruitBusUnitInfo/getCurrentUnitInfo`)
        .then(response => {
          this.listLoading = false
          if (response.data.result) {
            this.editForm.id = response.data.result.id
            this.editForm.postNum = response.data.result.postNum
            this.editForm.leaderPostNum = response.data.result.leaderPostNum
            this.editForm.personNum = response.data.result.personNum
            this.editForm.leaderPersonNum = response.data.result.leaderPersonNum
            this.editForm.retireeNum = response.data.result.retireeNum
            this.editForm.institutional = response.data.result.institutional ? JSON.parse(response.data.result.institutional) : []
            this.editForm.receiveMode = response.data.result.receiveMode ? JSON.parse(response.data.result.receiveMode) : []
            this.editForm.receiveModeRemark = response.data.result.receiveModeRemark
          }
        })
        .catch(error => {
          this.$message({
            message: '获取失败:' + error,
            type: 'error'
          })
          this.listLoading = false
        })
    },
    tableresize (obj) {
      var clientHeight = 0
      if (document.body.clientHeight && document.documentElement.clientHeight) {
        clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight
      } else {
        clientHeight = (document.body.clientHeight > document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight
      }
      obj.$nextTick(function () {
        // obj.tableHeight = clientHeight - 292
        obj.tableHeight = clientHeight - 220
      })
    }
  },
  mounted () {
    let theYear = 2023
    this.yearList = []
    for (let i = theYear; i > theYear - 5; i--) {
      console.log(i)
      this.yearList.push(i)
    }
    this.getUnitName()
    this.getDetail()
    this.tableresize(this)
    let _this = this
    window.onresize = function windowResize () {
      // 通过捕获系统的onresize事件触发我们需要执行的事件
      _this.tableresize(_this)
    }
  }
}
</script>
<style>
.selectioncontent{
  border-bottom:1px solid #333;
  padding:5px !important;
}
  .pointtab .el-badge__content.is-fixed{
    right: -5px;
    top:18px;
  }
  .pointtab{
    padding-right:22px;
  }
  .pointRadio .el-badge__content.is-fixed{
    right: -5px;
    top:6px;
  }
  .pointRadio .el-radio-button__inner{
    height:40px;
    padding-left:15px;
    padding-right:42px;
  }
#recruitlist .el-table--border td, .el-table--border th, .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed{
  border-bottom:1px solid #95B8E7;
}
#recruitlist .el-table td, #recruitlist .el-table th.is-leaf{
  border-right:1px solid #95B8E7;
}
  .wboxd .el-table th{
    font-weight: normal;
    background-image: linear-gradient(to bottom , #f8f8f8, #efefef);
    text-align: center;
    border-right: #95B8E7 solid 1px;
    border-bottom: #95B8E7 solid 1px;
    min-height: 30px;
    line-height:30px;
  }
  .wboxd .el-table td{
    padding:0;
    font-size:var(--size14) !important;
    line-height: 20px;
    font-family: '宋体',
  }
  .tableth{
    background-image: linear-gradient(to bottom , #f8f8f8, #efefef);
    height:33px;
  }
  #recruitlist .wboxs{
    height:45px;
    padding-top:10px;
  }
  #recruitlist .el-table__row{
    height: 50px;
  }
  #recruitlist #legent{
    float:right;
    margin-right: 20px;
  }
  #recruitlist #legent div{
    float:left;
    line-height: 42px;
    font-size:var(--size12);
  }
  #recruitlist #legent i{
    width: 30px;
    height: 30px;
    background-position: center center;
    background-repeat: no-repeat;
    float: left;
    display: block;
    margin:5px 0px 0 3px;
  }
  #recruitlist #selectionindexlist .cell i.custom{
    width: 30px;
    height: 30px;
    background-position: center center;
    background-repeat: no-repeat;
    float: center;
    display: block;
    margin:0 auto;
  }
  #recruitlist .el-step__title.is-finish {
    color: #409EFF;
  }
  #recruitlist .el-step__title {
    font-size:12px;
    line-height: 22px;
    padding-left: 8px;
  }
  #recruitlist .el-steps{
    margin:10px 0;
  }
  .el-tooltip__popper.is-dark{
    font-size:var(--size18) !important;
  }
  .el-tabs--card>.el-tabs__header {
    border-bottom: 1px solid #9CA3B3;
  }
  .el-tabs--card>.el-tabs__header .el-tabs__nav {
    border: 1px solid #9CA3B3;
    border-bottom: 0;
  }
  .el-tabs--card>.el-tabs__header .el-tabs__item {
    border-left: 1px solid #9CA3B3;
    /* background-color: #F0F0F0; */
  }
  .el-tabs__item.is-active {
    color: #0000FF !important;
    font-weight: bolder !important;
    /* background-color: #fff !important; */
    /* border-bottom: 2px solid #9CA3B3 !important; */
  }
</style>
<style scoped>
.mytable{
  border-top: 1px solid #74a6cc;
  border-left: 1px solid #74a6cc;
  margin:0 10px 10px;
  width: calc(100% - 20px);
}
.mytable th{
  padding: 10px;
  border-right: 1px solid #74a6cc;
  border-bottom: 1px solid #74a6cc;
  vertical-align: top;
  line-height: 150%;
  background: #FAFAFA;
  width:250px;
  text-align:right;
}
.mytable td{
  padding: 10px;
  border-right: 1px solid #74a6cc;
  border-bottom: 1px solid #74a6cc;
  vertical-align: top;
  line-height: 150%;
}
  .el-tooltip__popper{
    font-size:var(--size) !important;
  }
  h1{
    font-size:var(--size16) !important;
    font-weight: bolder;
    height: 30px;
    border-bottom: 1px solid #95B8E7;
    font-family: '宋体';
    line-height: 30px;
    color: #000;
    padding-left:10px;
    background-image: linear-gradient(to bottom , #EEF4FF, #E0ECFF);
    margin:0;
  }
  .el-pagination{
    float: left;
    padding:7px 10px;
  }
  .wboxs{
    padding:5px 15px;
    width: calc(100% - 30px);
    background: #fff;
    border: 1px solid #95B8E7;
    margin:0 10px;
    overflow: hidden;
  }
  .wboxd{
    padding:0;
    width: calc(100% - 0px);
    background: #fff;
    border: 1px solid #95B8E7;
    margin:0 10px;
    overflow: hidden;
  }
</style>
